<template>
	<view class="changeNumber">
		<view class="list">
			<view class="phone">
				新手机号
			</view>
			<input type="text" value="" placeholder="请输入新的手机号码" />
		</view>
		<view class="list" style="margin-top: 4%;">
			<view class="phone">
				短信验证
			</view>
			<input type="text" value="" placeholder="请输入短信验证码" style="width: 40%;"/>
			<view class="btn">
				发送短信
			</view>
		</view>
		<view class="attention">
			注：短信验证码将发送至原来绑定的手机上
		</view>
		<view class="bottom">
			<view class="withdrawal">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.changeNumber{
		padding: 30rpx;
	}
	.list{
		display: flex;
		flex-direction: row;
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgb(238,238,238);
		align-items: baseline;
	}
	.phone{
		font-size: 16px;
		margin-right: 10%;
	}
	.btn{
		width: 25%;
		height: 60rpx;
		text-align: center;
		border-radius: 40rpx;
		padding-top: 8rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		background-color: rgb(0,186,245);
	}
	.attention{
		color: red;
		text-align: right;
		padding-top: 10rpx;
	}
	.bottom {
		margin: 0 auto;
		width: 85%;
		margin-top: 120%;
	}
	
	.withdrawal {
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53, 199, 233), rgb(30, 141, 255));
	}
</style>
